<template>
	<view class="contina">
		<view class="w">
			<view class="card">
				<view class="item flex_a_c">
					<view class="label">原手机号</view>
					<view class="val">{{show_phone}}</view>
				</view>
				<view class="item flex_a_c">
					<view class="label">确认手机号</view>
					<u--input border="none" placeholder="请输入原手机号" v-model="form.phone" type="number"
						maxlength="11"></u--input>
					<u-code ref="uCode2" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
					<text @tap="getCode2" :text="tips2" class="u-page__code-text">{{ tips2 }}</text>
				</view>
				<view class="item flex_a_c">
					<view class="label">验证码</view>
					<u--input border="none" placeholder="请输入验证码" v-model="form.code" type="number"
						maxlength="11"></u--input>
				</view>
				<view class="item flex_a_c">
					<view class="label">新密码</view>
					<u--input border="none" placeholder="请输入新密码" v-model="form.password" type="number"
						maxlength="11"></u--input>
				</view>
				<view class="item flex_a_c">
					<view class="label">确认新密码</view>
					<u--input border="none" v-model="form.password_confirmation" placeholder="请确认新密码"></u--input>
				</view>
			</view>
		</view>
		<flooterCom text="确认修改" @click="submit"></flooterCom>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				tips2: "点我获取验证码",
				show_phone: '',
				form: {
					phone: '',
					code: '',
					password: '',
					password_confirmation: '',
				}
			};
		},
		components: {
			flooterCom
		},
		onShow() {
			this.show_phone = this.$fun.getCache('show_phone')
		},
		methods: {
			codeChange2(text) {
				this.tips2 = text;
			},
			getCode2() {
				if (this.$refs.uCode2.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.userApi.sendVcode({
						phone: this.form.newphone
					}).then(res => {
						uni.$u.toast('验证码已发送')
						this.$refs.uCode2.start();
					})
					uni.hideLoading();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					await this.$api.userApi.changePassword(this.form)
					this.$fun.removeToken()
					uni.hideLoading()
					this.$fun.tipTopage('修改成功,请重新登陆', '/pages/login/login')
				} catch (e) {
					uni.hideLoading()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contina {
		background-color: #F8F8F8;
	}

	.card {
		box-shadow: 0px 2px 5px 0px rgba(154, 154, 154, 0.302);

		& .item {
			padding-bottom: 30rpx;
			border-bottom: 1px solid #E9E9E9;
			margin-top: 30rpx;

			.label {
				width: 200rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				font-style: normal;
				text-transform: none;
			}

			.val {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				text-align: right;
				font-style: normal;
				text-transform: none;
			}
		}

		.item:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}

		.u-page__code-text {
			font-weight: 400;
			font-size: 32rpx;
			color: #3586FC;
			text-align: right;
			font-style: normal;
			text-transform: none;
		}
	}
</style>